<template>
    <div class="context">
      <div class="context-header">
        <p class="title">任务完成情况</p>
        <div class="context-bottom-left"></div>
  
        <div class="context-bottom-left">
          作业：<el-progress :percentage="50"></el-progress> 测试:<el-progress
            :percentage="100"
            status="success"
          ></el-progress>
          试题：<el-progress :percentage="100" status="warning"></el-progress>
          成绩：<el-progress :percentage="50" status="exception"></el-progress>
        </div>
        <div class="context-bottom-left"></div>
      </div>
  
      <div class="context-mid">
        <div class="context-bottom-left"></div>
        <div class="context-bottom-left" id="main"></div>
        <div class="context-bottom-left"></div>
      </div>
  
      <div class="context-bottom">
        <div class="context-bottom-left1" id="StudentList">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        percentage: 10,
        colors: [
          { color: "#f56c6c", percentage: 20 },
          { color: "#e6a23c", percentage: 40 },
          { color: "#5cb87a", percentage: 60 },
          { color: "#1989fa", percentage: 80 },
          { color: "#6f7ad3", percentage: 100 },
        ],
      };
    },
  
    methods: {
      format(percentage) {
        return percentage === 100 ? "满" : `${percentage}%`;
      },
      increase() {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      },
  
      myEcharts() {
        var myChart = this.$echarts.init(document.getElementById("main"));
  
        var option = {
          title: {
            text: "班级分布情况",
            textStyle: {
              // 控制标题的文字样式
              color: "blue",
            },
          },
          series: [
            {
              type: "pie",
  
              data: [
                {
                  value: 11231,
                  name: "Java4",
                  itemStyle: {
                    // 控制淘宝这一区域的样式
                    color: "yellow",
                  },
                  label: {
                    color: "green",
                  },
                  emphasis: {
                    itemStyle: {
                      // 控制淘宝这一区域的样式
                      color: "pink",
                    },
                    label: {
                      color: "black",
                    },
                  },
                },
                {
                  value: 22673,
                  name: "产业学院",
                },
                {
                  value: 6123,
                  name: "Java2",
                },
                {
                  value: 8989,
                  name: "Java3",
                },
                {
                  value: 6700,
                  name: "Java1",
                },
              ],
            },
          ],
        };
  
        myChart.setOption(option);
      },
  
      studentList() {
        var myChart = this.$echarts.init(document.getElementById("StudentList"));
  
        var xDataArr = [
          "孙禹",
          "汪子豪",
          "朱振宇",
          "张正",
          "刘刚",
          "孙小山",
          "戴韩城",
          "张吕杰",
        ];
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
        var option = {
          animation: true,
  
          animationDuration: function (arg) {
            console.log(arg);
            return 2000 * arg;
          },
          animationEasing: "bounceOut",
          animationThreshold: 7,
          xAxis: {
            type: "category",
            data: xDataArr,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              type: "bar",
              data: yDataArr,
              markPoint: {
                data: [
                  {
                    type: "max",
                    name: "最大值",
                  },
                  {
                    type: "min",
                    name: "最小值",
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: "average",
                    name: "平均值",
                  },
                ],
              },
              label: {
                show: true,
                rotate: 60,
              },
              barWidth: "30%",
            },
          ],
        };
  
        myChart.setOption(option);
      },
    },
    mounted() {
      this.myEcharts();
      this.studentList();
    },
  };
  </script>
  
  <style>
  .context {
    width: 1550px;
    height: 660px;
    margin: 20px auto;
  }
  
  .context-header {
    width: 1300px;
    height: 220px;
  }
  
  .context-mid {
    width: 1300px;
    height: 220px;
  }
  
  .context-bottom {
    width: 1300px;
    height: 220px;
  }
  
  .context-bottom-left {
    height: 100%;
    width: 33%;
    float: left;
  }
  .context-bottom-left1 {
    height: 100%;
    width: 100%;
    float: left;
  }
  .title {
    color: #343434;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
  }
  
  .tit {
    color: #343434;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: right;
  }
  
  </style>
  